<template>
  <div>
    <el-container>
      <el-header
        style="display:flex;align-items: center;justify-content: space-between;padding: 10px;border-bottom: 1px solid #f2f2f2;"
      >
        <div>
          <svg-icon class="primary" :icon-class="$route.meta.icon" />
          <span class="primary">员工账户详细</span>
        </div>
        <div class="header-button-container">
          <el-button :icon="queryType? 'el-icon-search':'el-icon-close'" type="primary"
                     @click="chooseClick">{{queryType == false?'隐藏':'查询'}}
          </el-button>
          <ExportList2Excel ref="exportList2Excel" @handleExport="handleExport" />
        </div>
      </el-header>
      <el-card class="box-card" >
        <div class="deleted_OrderHeader">
          <el-row :gutter="20" >
            <el-col :span="8">
                <span class="deleted_Row_Headings">员工名称:</span>
                <span class="deleted_OrderTitle">{{form.name}}</span>
            </el-col>
            <el-col :span="8">
                <span class="deleted_Row_Headings">手机号码:</span>
                <span class="deleted_OrderTitle">{{form.mobile}}</span>
            </el-col>
            <el-col :span="8">
                <span class="deleted_Row_Headings">用户级别:</span>
                <span class="deleted_OrderTitle">vip{{form.vip}}</span>
            </el-col>
            </el-row>
            <el-row :gutter="20" class="deleted_OrderContent">
            <!-- <el-col :span="8">
                <span class="deleted_Row_Headings">账户余额:</span>
                <span class="deleted_OrderTitle">{{form.balance}}</span>
            </el-col> -->
            <el-col :span="8">
                <span class="deleted_Row_Headings">福利金余额:</span>
                <span class="deleted_OrderTitle">{{form.welfare}}</span>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <div class="pd10">
        <div style="margin-bottom: 10px;display: flex;align-items: center" v-show="queryType == false">
          <el-input
            prefix-icon="el-icon-search"
            placeholder="福利卡名称"
            style="width: 200px;margin-left: 10px "
            v-model="query.name"
            v-show="activeType == true"
          ></el-input>
          <el-select v-model="query.consumptionType" placeholder="请选择消费类型"
          v-show="activeType == false"
          style="width: 200px;margin-left: 10px ">
            <el-option
            v-for="item in consumptionOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
          <el-date-picker
            v-model="query.period"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 300px;margin-left: 10px ">
        </el-date-picker>
          <el-button
            style="margin-left: 10px"
            icon="el-icon-search"
            type="primary"
            @click="queryClick"
          >查询</el-button>
          <el-button
            style="margin-left: 10px"
            icon="el-icon-refresh-right"
            type="info"
            @click="resetClick"
          >重置</el-button>
        </div>
        <!-- <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="福利金卡包" name="welfareCards"> -->
            <el-table
              :data="welfareCardsData"
              border
              stripe
              :height="curHeight"
              ref="table"
              style="width: 100%;"
              v-loadMore="[payLoads,'welfareCards']"
            >
            <el-table-column label="福利卡号" align="center" prop="code"></el-table-column>
            <el-table-column label="福利卡名" align="center" prop="memo"></el-table-column>
            <el-table-column label="福利卡金额" align="center" prop="credit" width="100"></el-table-column>
            <el-table-column label="福利卡余额" align="center" prop="balance" width="100"></el-table-column>
            <el-table-column label="充值时间" align="center" prop="createDate"></el-table-column>
            <el-table-column label="有效期开始时间" align="center" prop="startDate"></el-table-column>
            <el-table-column label="有效期结束时间" align="center" prop="endDate"></el-table-column>
            <el-table-column label="操作" align="left" fixed="right" width="100">
            <template slot-scope="scope">
              <div>
                <el-tooltip v-permission="['member.edit']" class="item" effect="dark" content="编辑福利卡" v-show="deleted == true" placement="top-start">
                  <a @click="editClick(scope.row)">
                    <i style="color: #409EFF" class="el-icon-edit"></i>
                  </a>
                </el-tooltip>
                <el-tooltip v-permission="['member.edit']" class="item" effect="dark" content="查看消费详情" v-show="deleted == false" placement="top-start">
                  <a style="margin-left: 10px" @click="detailClick(scope.row)">
                    <i style="color: #409EFF" class="el-icon-position"></i>
                  </a>
                </el-tooltip>
                <el-tooltip class="item" v-permission="['member.del']" effect="dark" content="恢复客户" v-show="deleted == true" placement="top-start">
                  <a style="margin-left: 10px" @click="restoreMchCourse(scope.row)">
                    <i style="color: #E6A23C" class="el-icon-refresh-right"></i>
                  </a>
                </el-tooltip>
                <el-tooltip v-permission="['member.del']" class="item" effect="dark" content="办理离职" v-show="deleted == true" placement="top-start">
                  <a style="margin-left: 10px" @click="deleteMember(scope.row)">
                    <i style="color: #F56C6C" class="el-icon-delete"></i>
                  </a>
                </el-tooltip>
              </div>
            </template>
              </el-table-column>
            </el-table>
          <!-- </el-tab-pane> -->
          <!-- <el-tab-pane label="余额消费记录" name="storedValueCard">
            <el-table
              :data="storedValueCardData"
              border
              stripe
              :height="curHeight"
              ref="table"
              style="width: 100%;"
              v-loadMore="[payLoads,'storedValueCard']"
            >
              <el-table-column label="消费日期" width="120" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.time | formatDate}}</span>
                </template>
              </el-table-column>
              <el-table-column label="订单号" align="center" prop="orderNumber"></el-table-column>
              <el-table-column label="消费类型" align="center" prop="type"></el-table-column>
              <el-table-column label="消费金额" align="center" prop="amount"></el-table-column>
              <el-table-column label="账户余额" align="center" prop="balance"></el-table-column>
              <el-table-column label="操作" align="left" fixed="right" width="100">
                <template slot-scope="scope">
                <div>
                    <el-tooltip v-permission="['member.edit']" class="item" effect="dark" content="编辑用户" v-show="deleted == true" placement="top-start">
                    <a @click="editClick(scope.row)">
                        <i style="color: #409EFF" class="el-icon-edit"></i>
                    </a>
                    </el-tooltip>
                    <el-tooltip v-permission="['member.edit']" class="item" effect="dark" content="查看详情" v-show="deleted == false" placement="top-start">
                    <a style="margin-left: 10px" @click="addressClick(scope.row)">
                        <i style="color: #409EFF" class="el-icon-position"></i>
                    </a>
                    </el-tooltip>
                    <el-tooltip class="item" v-permission="['member.del']" effect="dark" content="恢复客户" v-show="deleted == true" placement="top-start">
                    <a style="margin-left: 10px" @click="restoreMchCourse(scope.row)">
                        <i style="color: #E6A23C" class="el-icon-refresh-right"></i>
                    </a>
                    </el-tooltip>
                    <el-tooltip v-permission="['member.del']" class="item" effect="dark" content="办理离职" v-show="deleted == true" placement="top-start">
                    <a style="margin-left: 10px" @click="deleteMember(scope.row)">
                        <i style="color: #F56C6C" class="el-icon-delete"></i>
                    </a>
                    </el-tooltip>
                </div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane> -->
          <el-footer class="el-footerBox">
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="loadMember"
        ></pagination>
      </el-footer>
        <!-- </el-tabs> -->
      </div>
        <!-- <el-button type="text" @click="welfareDialogTableVisible = true">打开嵌套表格的 Dialog</el-button> -->

        <el-dialog title="福利卡详情" :visible.sync="welfareDialogTableVisible" width="70%">
        <el-table :data="welfareCardsDetailData">
            <el-table-column property="createDate" label="日期" ></el-table-column>
            <el-table-column property="orderNumber" label="订单号"></el-table-column>
            <el-table-column property="type" label="消费类型" width="100"></el-table-column>
            <el-table-column property="amount" label="金额" width="100"></el-table-column>
            <el-table-column property="balance" label="卡余额" width="100"></el-table-column>
            <el-table-column property="memo" label="消费信息" ></el-table-column>
            <el-table-column label="功能" width="100" align="center">
                <template slot-scope="scope">
                    <el-button
                    @click="consumptionDetailClick(scope.row)"
                    type="primary"
                    size="mini"
                    v-permission="['companyList.query']"
                    >查看详情</el-button>
                </template>
                </el-table-column>
            <!-- <el-table-column label="操作" align="left" fixed="right" width="100">
                <template slot-scope="scope">
                <div>
                    <el-tooltip v-permission="['member.edit']" class="item" effect="dark" content="编辑用户" v-show="deleted == true" placement="top-start">
                    <a @click="editClick(scope.row)">
                        <i style="color: #409EFF" class="el-icon-edit"></i>
                    </a>
                    </el-tooltip>
                    <el-tooltip v-permission="['member.edit']" class="item" effect="dark" content="查看订单详情" v-show="deleted == false" placement="top-start">
                    <a style="margin-left: 10px" @click="orderDetailClick(scope.row)">
                        <i style="color: #409EFF" class="el-icon-position"></i>
                    </a>
                    </el-tooltip>
                    <el-tooltip class="item" v-permission="['member.del']" effect="dark" content="恢复客户" v-show="deleted == true" placement="top-start">
                    <a style="margin-left: 10px" @click="restoreMchCourse(scope.row)">
                        <i style="color: #E6A23C" class="el-icon-refresh-right"></i>
                    </a>
                    </el-tooltip>
                    <el-tooltip v-permission="['member.del']" class="item" effect="dark" content="办理离职" v-show="deleted == true" placement="top-start">
                    <a style="margin-left: 10px" @click="deleteMember(scope.row)">
                        <i style="color: #F56C6C" class="el-icon-delete"></i>
                    </a>
                    </el-tooltip>
                </div>
                </template>
              </el-table-column> -->
        </el-table>
        <el-footer class="el-footerBox">
                <pagination
            v-show="dialogTotal>0"
            :total="dialogTotal"
            :page.sync="dialogPageNum"
            :limit.sync="dialogPageSize"
            @pagination="getConsumptionDetail"
            ></pagination>
        </el-footer>
        </el-dialog>
    </el-container>
  </div>
</template>

<script>
import permission from "@/directive/permission/index.js"; // 权限判断指令
import { list, del, update, find } from "@/api/companyEmployee";
import {selectCompanyEmployeeCard,cardBillList} from '@/api/cardBill'
import utils from "../../utils/utils.js";
import { EventBus } from "@/api/eventBus";
import Pagination from "@/components/Pagination";
import CategoryPanel from "@/components/CategoryPanel";
import loadMore from "@/utils/loadMore.js";
import ExportList2Excel from "@/components/ExportList2Excel";

export default {
  name: "employee-list",
  directives: { permission },
  data() {
    return {
      memberData: [],
      pageNum: 1,
      pageSize: 20,
      total: 0,
      dialogPageNum: 1,
      dialogPageSize: 20,
      dialogTotal: 0,
      queryType: true,
      query: {
        name: "",
        consumptionType:"",
        period:"",
      },
      keyword: {
        name: "",
        consumptionType:"",
        period:"",
        startTime:"",
        endTime:""
      },
      queryPhone: "",
      queryName: "",
      curHeight: null,
      excelData: [],
      memberCategoryId: "",
      deleted: false,
      restoreForm: {
        id: "",
        deleted: false
      },
      form: {
        id: "",
        name: "",
        vip: 0,
        mobile:"",
        balance: 0,
        welfare: 0,
        memberId:"",
        companyId:""
      },
      activeName: "welfareCards", //页面打开默认显示福利金板块
      activeType: true,//控制面板切换的搜索内容
      welfareDialogTableVisible: false, //福利金明细的弹窗开关
      welfareCardsData:[], //福利卡包列表信息
        welfareCardsDetailData:[
        //   {
        //     orderNumber:123456789000,
        //     type:"入账",
        //     amount:1000,
        //     balance:1000,
        //   },
        //   {
        //     orderNumber:123456789001,
        //     type:"消费",
        //     amount:200,
        //     balance:800,
        //   }
        ], //福利卡详情的表信息
      storedValueCardData:[
          {
            orderNumber:123456789000,
            type:"入账",
            amount:1000,
            balance:1000,
          },
          {
            orderNumber:123456789001,
            type:"消费",
            amount:200,
            balance:800,
          }
          ], //余额储值卡列表信息
          consumptionOptions:[{label:"消费",value:1},{label:"入账",value:2}],
          payLoads:"",
          selectRowId:"", //福利卡详情的行id
    };
  },
  components: { Pagination, CategoryPanel, ExportList2Excel },
  created() {
    var _this = this;
    _this.form.id = this.$route.query.employeeId;
    _this.form.companyId = this.$route.query.companyId;
    _this.form.memberId = this.$route.query.memberId;
    console.info("_this.companyId--" + _this.companyId);
    this.loadMember();
    this.getEmployeeInfo(_this.form.memberId,_this.form.companyId)
    // EventBus.$on("member-add", res => {
    //   // 监听新增完毕
    //   // 更新列表数组
    //   _this.memberData.splice(0, 0, res);
    // });
    // EventBus.$on("member-edit", res => {
    //   // 监听新增完毕
    //   // 更新列表数组
    //   for (var i = 0; i < _this.memberData.length; i++) {
    //     if (_this.memberData[i].id == res.id) {
    //       _this.memberData[i] = res;
    //     }
    //   }
    // });
  },
  activated() {
    this.payLoads = new Date().getTime();
    var _this = this;
    _this.form.id = this.$route.query.employeeId;
    _this.form.companyId = this.$route.query.companyId;
    _this.form.memberId = this.$route.query.memberId;
    console.info("_this.companyId--" + _this.companyId);
    this.loadMember();
    this.getEmployeeInfo(_this.form.memberId,_this.form.companyId)
  },
  mounted() {
    this.comeIn();
    this.beforeMount();
  },
  filters: {
    formatDate: function(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + MM + "-" + d;
    },
    watchGender(val) {
      if (val == 1) {
        return "男";
      } else if (val == 2) {
        return "女";
      } else {
        return "隐藏";
      }
    },
    watchVip(val) {
      if (val == 0) {
        return "vip0";
      } else if (val == 1) {
        return "vip1";
      } else if (val == 2) {
        return "vip2";
      } else if (val == 3) {
        return "vip3";
      } else if (val == 4) {
        return "vip4";
      } else if (val == 5) {
        return "vip5";
      }
    }
  },
  methods: {
      //获取用户的信息
      getEmployeeInfo(memberId,companyId){
          find(memberId,companyId)
                .then(response => {
                    console.log("请求的会员信息"+JSON.stringify(response) )
                    if(response.type == "success"){
                        let mobile = "" + response.data.companyEmployeeVo.mobile
                        this.form.vip = response.data.companyEmployeeVo.vip
                        this.form.balance = response.data.companyEmployeeVo.balance
                        this.form.mobile = mobile.substr(0,3) + "****" + mobile.substr(7,10)
                        this.form.name = response.data.companyEmployeeVo.name
                        console.log("请求的会员信息mobile--"+mobile )
                        console.log("请求的会员信息this.form"+JSON.stringify(this.form) )

                    }

                })
            .catch(error => {
                console.log("error!!");
            });
      },

      //   表格数据的过滤器
      formatList(data){
          if(data.length > 0){
              data.map((item)=>{
                  item.startDate = this.formatDate2day(item.startDate)
                  item.endDate = this.formatDate2day(item.endDate)
                  item.createDate = this.formatDate2Time(item.createDate)
              })
          }
          return data
      },

        watchConsumptionType(val) {
            if (val == 1) {
                return "男";
            } else if (val == 2) {
                return "女";
            } else {
                return "隐藏";
            }
        },

    formatDate2day(val){
        let date = new Date(val);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        return y + '-' + MM + '-' + d;
    },

    formatDate2Time(value) {
            let date = new Date(value);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d + " " + h + ":" + m + ":" + s;
        },

    //调用数据导出的函数
    handleExport(PageParam) {

      //要导出函数携带的参数
      let data = {};

      var _this = this;
      let params = new URLSearchParams();
      console.log("_this.form.id" + _this.form.id );
      params.append("id", _this.form.id);
      params.append("name", _this.keyword.name);
      params.append("consumptionType", _this.keyword.consumptionType);
      params.append("period", _this.keyword.period);
      if(_this.activeType == true){
          data.tHeader = [
        "福利卡号",
        "福利卡名",
        "福利卡金额",
        "福利卡余额",
        "充值时间",
        "有效期"
      ];
      data.filterVal = ["welfareNumber", "welfareName", "welfareLimit", "welfareBalance", "createDate","welfarePeriod"];
      data.filename = "福利卡列表"
          //发送福利金的卡列表请求
          console.info("发送了福利金的请求")
        //   find(_this.form.id)
        // .then(response => {
        //   console.log("请求的会员信息"+JSON.stringify(response) )
        //   _this.form.name = response.data.name;
        //   _this.form.mobile = response.data.mobile;
        //   _this.form.vip = response.data.vip;
        //   _this.form.balance = response.data.balance;
        //   _this.form.welfare = response.data.welfare;
        // })
        // .catch(error => {
        //   console.log("error!!");
        // });
      }else if(_this.activeType == false){
          data.tHeader = [
        "消费日期",
        "订单号",
        "消费类型",
        "消费金额",
        "账户余额"
      ];
      data.filterVal = ["time", "orderNumber", "type", "amount", "balance"];
      data.filename = "余额储值卡消费明细列表"
          console.info("发送了余额储值的请求")
        //   find(_this.form.id)
        // .then(response => {
        //   console.log("请求的会员信息"+JSON.stringify(response) )
        //   _this.form.name = response.data.name;
        //   _this.form.mobile = response.data.mobile;
        //   _this.form.vip = response.data.vip;
        //   _this.form.balance = response.data.balance;
        //   _this.form.welfare = response.data.welfare;
        // })
        // .catch(error => {
        //   console.log("error!!");
        // });
      }
    },

    //福利金和余额表切换
    handleClick(tab, event){
        console.info("切换器被点击了")
        console.log("tab--"+tab.name);
        console.log("activeName--"+this.activeName);
        this.pageNum = 1
        if(tab.name == "welfareCards"){
            this.activeType = true
            this.query.consumptionType = ""
            this.loadMember()
            //发送福利金卡包的请求
        }else if(tab.name == "storedValueCard"){
            this.activeType = false
            this.query.name = ""
            this.loadMember()
            //发送余额消费记录的请求
        }
    },

    //打开福利金卡的消费详情弹窗
    detailClick(row){
        console.info("row--"+JSON.stringify(row))
        this.selectRowId = row.id
        this.getConsumptionDetail()
    },

    //获取福利卡消费详情的请求
    getConsumptionDetail(){
        let _this = this
        let sendData = {
            pageNum:_this.dialogPageNum,
            pageSize:_this.dialogPageSize,
            cardId:_this.selectRowId,
        }
        cardBillList(sendData)
                .then(response => {
                    console.log("请求的会员信息"+JSON.stringify(response) )
                    let welfareCardsDetailData = response.data.data
                    if(welfareCardsDetailData.length > 0){
                        welfareCardsDetailData.map(item=>{
                            item.createDate = this.formatDate2Time(item.createDate)
                            item.amount = item.credit - item.debit
                            if(item.amount > 0){
                                item.type = "入账"
                            }else if(item.amount < 0){
                                item.type = "支出"
                            }
                        })
                        _this.welfareCardsDetailData = welfareCardsDetailData
                    }


                    console.log("请求的会员信息welfareCardsDetailData"+JSON.stringify(_this.welfareCardsDetailData) )
                    _this.welfareDialogTableVisible = true
                    _this.dialogTotal = response.data.total
                })
            .catch(error => {
                console.log("error!!");
            });
    },

    //查看福利卡消费详情的订单信息
    orderDetailClick(data){
        console.info("data--"+JSON.stringify(data))
    },

    //以下部分是原来的代码
    beforeMount() {
      window.onresize = () => {
        return (() => {
          if (this.queryType == false) {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            this.curHeight = h - 466; //减去页面上固定高度height
          } else {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            this.curHeight = h - 400; //减去页面上固定高度height
          }
        })();
      };
    },

    comeIn() {
      console.log("222");
      var h =
        document.documentElement.clientHeight || document.body.clientHeight;
      this.curHeight = h - 400; //减去页面上固定高度height
    },

    editClick(row) {
      this.$router.push({
        path: "/company/employeeEdit",
        query: { id: row.id }
      });
    },

    //请求福利金和余额卡的列表数据
    loadMember(val) {
      console.log("传输过来的企业员工id" + val);
      var _this = this;
      let pageInfo = {
            pageNum: _this.pageNum,
            pageSize: _this.pageSize,
      }
      let params = {
          memberId : _this.form.memberId
      }
      if(_this.activeType == true){
          params.companyId =  _this.form.companyId
          //发送福利金的卡列表请求
            console.info("发送了福利金的请求params--"+JSON.stringify(params))
            selectCompanyEmployeeCard(pageInfo, params)
                .then(response => {
                    console.log("请求的会员信息"+JSON.stringify(response) )
                    _this.welfareCardsData = _this.formatList(response.data.data)
                    _this.total = response.data.total
                    _this.updateScroll()
                })
            .catch(error => {
                console.log("error!!");
            });
      }else if(_this.activeType == false){
          console.info("发送了余额储值的请求")
          params.cardType = 0
          console.info("发送了余额储值的请求params--"+JSON.stringify(params))
            selectCompanyEmployeeCard(pageInfo, params)
                .then(response => {
                    console.log("请求的余额储值的请求"+JSON.stringify(response) )
                    if(response.data.data.length > 0){
                        let storedValueCardData = response.data.data
                        storedValueCardData.map(item => {
                            item.createDate = this.formatDate2Time(item.createDate)
                            item.amount = item.credit - item.debit
                            if(item.amount > 0){
                                item.type = "入账"
                            }else if(item.amount < 0){
                                item.type = "支出"
                            }
                        })
                        _this.storedValueCardData = storedValueCardData
                    }
                    _this.total = response.data.total
                    _this.updateScroll()
                })
            .catch(error => {
                console.log("error!!");
            });
      }
    },

    chooseClick() {
      this.queryType = !this.queryType;
      if (this.queryType == false) {
        var h =
          document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 466; //减去页面上固定高度height
      } else {
        var h =
          document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 420; //减去页面上固定高度height
      }
    },
    addClick() {
      this.$router.push({
        path: "/member/add"
      });
    },
    deleteMember(data) {
      console.log(data);
      var _this = this;
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          del(data.id)
            .then(response => {
              console.log(response);
              _this.memberData.forEach(function(item, index) {
                if (item.id == data.id) {
                  _this.memberData.splice(index, 1);
                }
              });
              _this.$message({
                message: response.content,
                offset: 120,
                center: true
              });
            })
            .catch(error => {
              console.log("error!!");
            });
        })
        .catch(() => {});
    },
    queryClick() {
        console.info("搜索项this.query--"+JSON.stringify(this.query))
        this.keyword = this.query;
        this.pageNum = 1;
        // this.loadMember();
    },
    resetClick() {
      this.query.name = "";
      this.query.consumptionType = "";
      this.query.period = "";
      this.keyword = this.query;
      this.pageNum = 1;
    //   this.loadMember();
    },

    notClick() {
      this.memberCategoryId = 0;
      this.deleted = false;
      this.loadMember();
    },
    delClick() {
      this.deleted = true;
      this.mchCourseGategoryId = "";
      this.loadMember();
    },
    nodeClick(data) {
      this.deleted = false;
      this.memberCategoryId = data.id;
      this.loadMember();
    },
    restoreMchCourse(row) {
      var _this = this;
      console.log(row);
      this.$confirm("确认恢复?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.restoreForm.id = row.id;
          update(_this.restoreForm)
            .then(response => {
              console.log(response);
              _this.memberData.forEach(function(item, index) {
                if (item.id == row.id) {
                  _this.memberData.splice(index, 1);
                }
              });
              _this.$message({
                message: response.content,
                offset: 120,
                center: true
              });
            })
            .catch(error => {
              console.log("error!!");
            });
        })
        .catch(() => {});
    },
    addressClick(row) {
      this.$router.push({
        path: "/receiver/list",
        query: { memberId: row.id }
      });
    },

    //重置缓存的滚动距离
    updateScroll() {
      if (this.activeType == true) {
        window.sessionStorage.setItem("loadTopwelfareCards", 0);
        window.sessionStorage.setItem("loadLeftwelfareCards", 0);
      } else if (this.activeType == false) {
        window.sessionStorage.setItem("loadTopstoredValueCard", 0);
        window.sessionStorage.setItem("loadLeftstoredValueCard", 0);
      }
    }
  }
};
</script>

<style scoped>
.el-footerBox {
  height: 50px !important;
  line-height: 50px !important;
  border-top: 1px solid #f2f2f2;
}

.deleted_OrderHeader {
  /* padding-top: 5px;
  padding-bottom: 5px; */
  /* border-bottom: 1px solid #f2f2f2; */
}

.deleted_Row_Headings {
    font-size: 14px;
    color: #666666;
    width: 85px;
  }

.deleted_OrderTitle {
font-size: 14px;
}

.deleted_OrderContent {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
</style>
